<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        body {
            /* font-family: var(--vscode-editor-font-family);
            font-weight: var(--vscode-editor-font-weight);
            font-size: var(--vscode-editor-font-size); */

            font-family: Arial, Helvetica, sans-serif;
            color: var(--vscode-editor-foreground);
            -webkit-user-select: none;
        }

        #app {
            display: absolute;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        :root {
            --font-monospace-family: var(--vscode-editor-font-family);
            --font-monospace-weight: var(--vscode-editor-font-weight);
            --font-monospace-size: var(--vscode-editor-font-size);

            --link-foreground: var(--vscode-textLink-foreground);
            --link-active: var(--vscode-textLink-activeForeground);

            /* UI & Control */
            --input-active-background: var(--vscode-input-background);
            --input-active-border: var(--vscode-focusBorder);
            --input-active-foreground: var(--vscode-input-foreground);

            --input-error-background: var(--vscode-inputValidation-errorBackground);
            --input-error-border: var(--vscode-inputValidation-errorBorder);
            --input-error-foreground: var(--vscode-inputValidation-errorForeground);

            --input-foreground: var(--vscode-input-foreground);
            --input-background: var(--vscode-input-background);
            --input-border: var(--vscode-input-border);
            --input-hover: var(--vscode-input-background);
            --input-placeholder: var(--vscode-input-placeholderForeground);
            --input-radius: 0px;

            --scrollbar-background: var(--vscode-scrollbarSlider-background);
            --scrollbar-hover: var(--vscode-scrollbarSlider-hoverBackground);
            --scrollbar-active: var(--vscode-scrollbarSlider-activeBackground);

            /* Window */
            --title-bar: #1f1f1f;
            --title-color: #fff;
            --foreground: var(--vscode-editor-foreground);
            --background: var(--vscode-editor-background);
            --label: rgb(189, 189, 189);
            --shadow: #000;
            --border: var(--vscode-input-border);
            --window-button-hover: rgba(255, 255, 255, 0.1);
            --window-button-active: rgba(255, 255, 255, 0.2);
            --window-blur-background: rgba(0, 0, 0, 0.25);

            --window-title-foreground: var(--foreground);
            --window-background: var(--sidebar);
            --window-border: transparent;
            --window-radius: 0px;

            /* Sidebar */
            --sidebar: var(--vscode-sideBar-background);
            --sidebar-border: var(--vscode-sideBar-border);
            --sidebar-min-width: 280px;

            --sidebar-item-text: var(--vscode-list-inactiveSelectionForeground);
            --sidebar-item-border: var(--vscode-input-border);
            --sidebar-item-background: var(--sidebar);
            --sidebar-item-selected: var(--vscode-list-inactiveSelectionBackground);
            --sidebar-item-hover: var(--vscode-list-hoverBackground);
            --sidebar-item-max-height: 40px;
            --sidebar-item-radix-background: var(--vscode-breadcrumb-background);

            --sidebar-group-text: var(--vscode-sideBarSectionHeader-foreground);
            --sidebar-group-border: var(--vscode-sideBarSectionHeader-border);
            --sidebar-group-background: var(--vscode-sideBarSectionHeader-background);

            /* Labels */
            --signalSize-background: rgba(0, 0, 0, 0.5);
            --signalSize-border: rgba(255, 255, 255, 0.2);
            --signalSize-color: var(--foreground);

            /* Color Picker */
            --picker-swatch-size: 15px;
            --picker-swatch-cols: 8;
            --picker-background: var(--vscode-breadcrumbPicker-background);
            --picker-border: var(--vscode-dropdown-border);

            /* Search */
            --search-background: var(--vscode-quickInput-background);
            --search-border: var(--border);
            --search-panel-background: transparent;
            --search-panel-border: var(--vscode-pickerGroup-border);
            --search-panel-text: var(--vscode-quickInput-foreground);
            --search-label: var(--foreground);
            --search-selected-background: var(--vscode-list-inactiveSelectionBackground);

            /* Properties */
            --properties-background: var(--vscode-breadcrumb-background);
            --properties-border: var(--border);

            /* Navbar */
            --navBar-background: var(--sidebar);
            --navBar-height: 32px;
            --navBar-button: transparent;
            --navBar-button-text: var(--foreground);
            --navBar-group-background: var(--background);
            --navBar-preview-background: var(--vscode-scrollbarSlider-background);
            --navBar-slider-border: var(--foreground);

            /* Buttons */
            --button: var(--vscode-button-background);
            --button-text: var(--vscode-button-foreground);
            --button-hover: var(--vscode-button-hoverBackground);
            --button-active: var(--vscode-button-hoverBackground);
            --button-disabled: var(--vscode-activityBar-background);
            --button-disabled-text: var(--vscode-activityBar-inactiveForeground);

            /* Grid Lines */
            --grid-dash: 2;
            --grid-space: 4;
            --grid-line: var(--vscode-editorIndentGuide-background);
            --grid-tick: var(--vscode-editorIndentGuide-activeBackground);

            /* Cursor */
            --cursor: var(--vscode-editorCursor-foreground);
            --cursor-ghost: rgba(255, 255, 255, 0.2);
            --cursor-width: 2;

            /* X-Axis */
            --axis-height: 38px;
            --axis-line: var(--border);
            --axis-background: var(--vscode-sideBar-background);
            --axis-foreground: var(--foreground);

            /* Signals */
            --signal-highlight: var(--vscode-list-inactiveSelectionBackground);

            /* Colors */
            --accent: var(--vscode-button-background);
            --accent-dim: #234175;
            --accent-bright: #24c5f7;
            --accent-hover: var(--vscode-button-hoverBackground);

            --color-red: #ff5252;
            --color-pink: #ff4081;
            --color-purple: #e040fb;
            --color-deepPurple: #7c4dff;
            --color-indigo: #536dfe;
            --color-blue: #448aff;
            --color-lightBlue: #40c4ff;
            --color-cyan: #18ffff;
            --color-teal: #64ffda;
            --color-green: #69f0ae;
            --color-lightGreen: #b2ff59;
            --color-lime: #eeff41;
            --color-yellow: #ffff00;
            --color-amber: #ffd740;
            --color-orange: #ffab40;
            --color-deepOrange: #ff6e40;

            /* Settings */
            --settings-action-background: var(--background);
        }

        /* treecore-waveform {
            width: 100%;
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            top: 10px;
        } */
    </style>

    <title>WaveViewer</title>
</head>

<body>
    <waveform-main id="app"></waveform-main>
</body>
<script src="../../../../modules/viewer/dep-libs/pixi.min.js"></script>
<!-- <script type="module" , src="./WaveViewer.js"></script> -->
<script type="module" src="../../../../../dist/waveviewer.bundled.js"></script>

</html>